<script setup>
import { ref } from 'vue';

const c = [101,102,102,102,102,102,102,102,102,102];
const c2 = ["06:00 - 12:00","06:00 - 12:00","06:00 - 12:00","06:00 - 12:00","06:00 - 12:00","06:00 - 12:00","06:00 - 12:00"]

const date = ref('');
const show = ref(false);

const onConfirm = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false;

  fieldValue.value = selectedOptions[0].text;
};

const columns = [
  { text: '张三', value: 'Hangzhou' },
  { text: '李四', value: 'Ningbo' },
  { text: '王五', value: 'Wenzhou' },
];
const fieldValue = ref('');
const showPicker = ref(false);
</script>

<template>
  <van-cell :value="date" title="选择预约日期" @click="show = true" />
  <van-calendar v-model:show="show" @confirm="onConfirm" />
  <van-popup v-model:show="showPicker" destroy-on-close position="bottom" round>
    <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
    />
  </van-popup>
</template>

<style scoped>

</style>